<template>
  <div class="grid-wrap">
    <div
      class="grid-item"
      v-for="(list, index) in mapOnlineList"
      :key="index"
      @click="mapSel(list)"
    >
      <div class="icon-wrap">
        <img class="icon" :src="require(`@/assets/png/online-map/${list.extra.icon}.png`)" alt="" />
        <SvgIcon v-if="sceneStore.onlineMapSels.includes(list.name)" icon-class="ic_选中" />
        <SvgIcon v-else icon-class="ic_未选中" />
      </div>
      <div class="title">{{ list.name }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { mapList } from '@/enum/map';
import { destroyLayer } from '@/service';
import { useSceneStore } from '@/store/scene';
import { deleteTreeNode, flattenTreeIterative } from '@/utils';
import { cloneDeep } from 'lodash';

interface IProps {
  activeKey: string;
  keyword: string;
}

defineOptions({
  name: 'Map',
});

const props = withDefaults(defineProps<IProps>(), {
  activeKey: '',
  keyword: '',
});

const mapOnlineList = computed(() => {
  return mapList.filter((item: any) => item.name.indexOf(props.keyword) > -1) || [];
});

const sceneStore = useSceneStore();

function mapSel(list: API.Scene.Map) {
  if (sceneStore.onlineMapSels.includes(list.name)) {
    const index = sceneStore.onlineMapSels.findIndex((item: string) => item === list.name);
    const layerIndex = sceneStore.layerList.findIndex(
      (item: API.Scene.ILayer) => item.type === 'imageLayer' && item.json.name === list.name
    );
    // 刪除图层文件夹中的资源
    const layerTree = cloneDeep(sceneStore.layerTree);
    const layerList = flattenTreeIterative(layerTree);
    const layers: any = layerList.filter(
      (v: any) => v.code === sceneStore.layerList[layerIndex].code
    );
    deleteTreeNode(sceneStore.layerTree, layers[0].fe_id, {
      id: 'fe_id',
    });
    sceneStore.onlineMapSels.splice(index, 1);
    destroyLayer(sceneStore.layerList[layerIndex]);
    sceneStore.layerList.splice(layerIndex, 1);
    sceneStore.selLayer = null;
  } else {
    sceneStore.onlineMapSels.push(list.name);
    // const zIndex: number = getLayerMaxIndex(sceneStore.layerList);
    const layer = {
      code: Math.random().toString().split('.')[1],
      show: true,
      json: list,
      name: list.name,
      layerName: list.name,
      desc: '',
      type: 'imageLayer',
    };
    sceneStore.layerList.unshift(layer);
    sceneStore.specialEffectVisible = true;
    sceneStore.selLayer = layer;
  }
}
</script>

<style lang="less" scoped>
.grid-wrap {
  padding-top: 8px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  .grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    margin-bottom: 25px;
    .icon-wrap {
      position: relative;
      .svg-icon {
        font-size: 16px;
        margin-right: 0px;
        position: absolute;
        bottom: 0px;
        right: 0px;
      }
    }
    .icon {
      width: 70px;
    }
    .title {
      margin-top: 19px;
      font-size: 12px;
      font-weight: 400;
      color: #ffffff;
    }
  }
}
</style>
